<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>应用商店</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
  
  <!-- 配置Tailwind自定义主题 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#165DFF',
            secondary: '#FF7D00',
            neutral: {
              100: '#F5F7FA',
              200: '#E4E7ED',
              300: '#C0C4CC',
              400: '#909399',
              500: '#606266',
              600: '#303133',
              700: '#1E1E1E',
            }
          },
          fontFamily: {
            inter: ['Inter', 'system-ui', 'sans-serif'],
          },
          boxShadow: {
            'card': '0 4px 20px rgba(0, 0, 0, 0.08)',
            'card-hover': '0 8px 30px rgba(0, 0, 0, 0.12)',
          }
        },
      }
    }
  </script>
  
  <!-- 自定义工具类 -->
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .text-balance {
        text-wrap: balance;
      }
      .animate-float {
        animation: float 3s ease-in-out infinite;
      }
      .backdrop-blur-sm {
        backdrop-filter: blur(4px);
      }
    }
  </style>
  
  <style>
    @keyframes float {
      0% { transform: translateY(0px); }
      50% { transform: translateY(-10px); }
      100% { transform: translateY(0px); }
    }
    
    html {
      scroll-behavior: smooth;
    }
    
    .scrollbar-hide::-webkit-scrollbar {
      display: none;
    }
    
    .scrollbar-hide {
      -ms-overflow-style: none;
      scrollbar-width: none;
    }
  </style>
</head>
<body class="font-inter bg-neutral-100 text-neutral-600 min-h-screen flex flex-col">
  <!-- 导航栏 -->
  <header class="sticky top-0 z-50 bg-white/90 backdrop-blur-sm border-b border-neutral-200 transition-all duration-300">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
      <div class="flex justify-between items-center h-16">
        <!-- Logo -->
        <div class="flex items-center space-x-2">
          <div class="bg-primary text-white p-2 rounded-lg">
            <i class="fa fa-store text-xl"></i>
          </div>
          <span class="text-xl font-bold text-neutral-700">应用商店</span>
        </div>
        
        <!-- 搜索栏 (中等屏幕及以上) -->
        <div class="hidden md:flex flex-1 max-w-xl mx-8">
          <div class="relative w-full">
            <input type="text" placeholder="搜索应用..." class="w-full pl-10 pr-4 py-2 rounded-full border border-neutral-200 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all">
            <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-neutral-400"></i>
          </div>
        </div>
        
        <!-- 导航链接 -->
        <nav class="hidden md:flex items-center space-x-6">
          <a href="#" class="text-neutral-700 font-medium hover:text-primary transition-colors">首页</a>
          <a href="#" class="text-neutral-700 font-medium hover:text-primary transition-colors">分类</a>
          <a href="#" class="text-neutral-700 font-medium hover:text-primary transition-colors">排行榜</a>
          <a href="#" class="text-neutral-700 font-medium hover:text-primary transition-colors">推荐</a>
        </nav>
        
        <!-- 用户操作 -->
        <div class="flex items-center space-x-4">
          <button class="md:hidden p-2 rounded-full hover:bg-neutral-100 transition-colors">
            <i class="fa fa-search text-neutral-600"></i>
          </button>
          <button class="p-2 rounded-full hover:bg-neutral-100 transition-colors">
            <i class="fa fa-user-circle text-neutral-600 text-xl"></i>
          </button>
          <button class="md:hidden p-2 rounded-full hover:bg-neutral-100 transition-colors" id="mobile-menu-button">
            <i class="fa fa-bars text-neutral-600"></i>
          </button>
        </div>
      </div>
    </div>
    
    <!-- 移动端菜单 -->
    <div class="md:hidden h-0 overflow-hidden transition-all duration-300" id="mobile-menu">
      <div class="px-4 py-3 space-y-3 border-t border-neutral-200">
        <a href="#" class="block py-2 text-neutral-700 font-medium hover:text-primary transition-colors">首页</a>
        <a href="#" class="block py-2 text-neutral-700 font-medium hover:text-primary transition-colors">分类</a>
        <a href="#" class="block py-2 text-neutral-700 font-medium hover:text-primary transition-colors">排行榜</a>
        <a href="#" class="block py-2 text-neutral-700 font-medium hover:text-primary transition-colors">推荐</a>
        <div class="relative">
          <input type="text" placeholder="搜索应用..." class="w-full pl-10 pr-4 py-2 rounded-full border border-neutral-200 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all">
          <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-neutral-400"></i>
        </div>
      </div>
    </div>
  </header>

  <!-- 主内容区 -->
  <main class="flex-1 container mx-auto px-4 sm:px-6 lg:px-8 py-8">
    <!-- 应用列表页 -->
    <section id="app-list" class="space-y-8">
      <!-- 轮播图 -->
      <div class="relative rounded-2xl overflow-hidden shadow-lg h-[200px] md:h-[300px] lg:h-[400px]">
        <div class="absolute inset-0 bg-gradient-to-r from-primary/80 to-primary/50 z-10"></div>
        <img src="https://picsum.photos/id/1/1200/600" alt="精选应用" class="w-full h-full object-cover">
        <div class="absolute inset-0 z-20 flex flex-col justify-center px-6 md:px-12">
          <h1 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-white mb-2">发现精彩应用</h1>
          <p class="text-white/90 max-w-xl text-[clamp(1rem,1.5vw,1.25rem)] mb-6">探索精选应用，让生活更便捷、更有趣</p>
          <button class="bg-white text-primary px-6 py-3 rounded-full font-medium shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 w-fit">
            浏览全部应用
          </button>
        </div>
      </div>
      
      <!-- 分类标签 -->
      <div class="overflow-x-auto scrollbar-hide">
        <div class="flex space-x-2 pb-2 min-w-max">
          <button class="px-4 py-2 bg-primary text-white rounded-full text-sm font-medium">全部</button>
          <button class="px-4 py-2 bg-white hover:bg-neutral-100 rounded-full text-sm font-medium transition-colors">效率工具</button>
          <button class="px-4 py-2 bg-white hover:bg-neutral-100 rounded-full text-sm font-medium transition-colors">游戏娱乐</button>
          <button class="px-4 py-2 bg-white hover:bg-neutral-100 rounded-full text-sm font-medium transition-colors">社交沟通</button>
          <button class="px-4 py-2 bg-white hover:bg-neutral-100 rounded-full text-sm font-medium transition-colors">影音视听</button>
          <button class="px-4 py-2 bg-white hover:bg-neutral-100 rounded-full text-sm font-medium transition-colors">学习教育</button>
          <button class="px-4 py-2 bg-white hover:bg-neutral-100 rounded-full text-sm font-medium transition-colors">生活服务</button>
          <button class="px-4 py-2 bg-white hover:bg-neutral-100 rounded-full text-sm font-medium transition-colors">摄影美化</button>
        </div>
      </div>
      
      <!-- 应用列表 -->
      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
        <!-- 应用卡片 1 -->
        <div class="bg-white rounded-xl overflow-hidden shadow-card hover:shadow-card-hover transition-all duration-300 transform hover:-translate-y-1 cursor-pointer" data-app-id="1">
          <div class="relative h-48 overflow-hidden">
            <img src="https://picsum.photos/id/2/400/300" alt="应用截图" class="w-full h-full object-cover">
            <div class="absolute top-3 right-3 bg-white/90 backdrop-blur-sm rounded-full px-2 py-1 text-xs font-medium text-primary">
              <i class="fa fa-star mr-1"></i>4.8
            </div>
          </div>
          <div class="p-4">
            <div class="flex items-center space-x-3 mb-3">
              <div class="w-12 h-12 rounded-lg overflow-hidden bg-neutral-100 flex-shrink-0">
                <img src="https://picsum.photos/id/10/100/100" alt="应用图标" class="w-full h-full object-cover">
              </div>
              <div>
                <h3 class="font-bold text-neutral-700">全能笔记</h3>
                <p class="text-xs text-neutral-500">效率工具</p>
              </div>
            </div>
            <p class="text-sm text-neutral-600 mb-4 line-clamp-2">一款功能强大的笔记应用，支持多种格式，云同步和离线使用。</p>
            <div class="flex justify-between items-center">
              <span class="text-xs text-neutral-500">100万+ 下载</span>
              <span class="bg-primary/10 text-primary px-3 py-1 rounded-full text-xs font-medium">免费</span>
            </div>
          </div>
        </div>
        
        <!-- 应用卡片 2 -->
        <div class="bg-white rounded-xl overflow-hidden shadow-card hover:shadow-card-hover transition-all duration-300 transform hover:-translate-y-1 cursor-pointer" data-app-id="2">
          <div class="relative h-48 overflow-hidden">
            <img src="https://picsum.photos/id/3/400/300" alt="应用截图" class="w-full h-full object-cover">
            <div class="absolute top-3 right-3 bg-white/90 backdrop-blur-sm rounded-full px-2 py-1 text-xs font-medium text-primary">
              <i class="fa fa-star mr-1"></i>4.9
            </div>
          </div>
          <div class="p-4">
            <div class="flex items-center space-x-3 mb-3">
              <div class="w-12 h-12 rounded-lg overflow-hidden bg-neutral-100 flex-shrink-0">
                <img src="https://picsum.photos/id/11/100/100" alt="应用图标" class="w-full h-full object-cover">
              </div>
              <div>
                <h3 class="font-bold text-neutral-700">音乐播放器</h3>
                <p class="text-xs text-neutral-500">影音视听</p>
              </div>
            </div>
            <p class="text-sm text-neutral-600 mb-4 line-clamp-2">高清音质，海量曲库，个性化推荐的音乐播放器。</p>
            <div class="flex justify-between items-center">
              <span class="text-xs text-neutral-500">500万+ 下载</span>
              <span class="bg-primary/10 text-primary px-3 py-1 rounded-full text-xs font-medium">免费</span>
            </div>
          </div>
        </div>
        
        <!-- 应用卡片 3 -->
        <div class="bg-white rounded-xl overflow-hidden shadow-card hover:shadow-card-hover transition-all duration-300 transform hover:-translate-y-1 cursor-pointer" data-app-id="3">
          <div class="relative h-48 overflow-hidden">
            <img src="https://picsum.photos/id/4/400/300" alt="应用截图" class="w-full h-full object-cover">
            <div class="absolute top-3 right-3 bg-white/90 backdrop-blur-sm rounded-full px-2 py-1 text-xs font-medium text-primary">
              <i class="fa fa-star mr-1"></i>4.7
            </div>
          </div>
          <div class="p-4">
            <div class="flex items-center space-x-3 mb-3">
              <div class="w-12 h-12 rounded-lg overflow-hidden bg-neutral-100 flex-shrink-0">
                <img src="https://picsum.photos/id/12/100/100" alt="应用图标" class="w-full h-full object-cover">
              </div>
              <div>
                <h3 class="font-bold text-neutral-700">智能计算器</h3>
                <p class="text-xs text-neutral-500">效率工具</p>
              </div>
            </div>
            <p class="text-sm text-neutral-600 mb-4 line-clamp-2">支持科学计算、单位换算、汇率计算的多功能计算器。</p>
            <div class="flex justify-between items-center">
              <span class="text-xs text-neutral-500">200万+ 下载</span>
              <span class="bg-primary/10 text-primary px-3 py-1 rounded-full text-xs font-medium">免费</span>
            </div>
          </div>
        </div>
        
        <!-- 应用卡片 4 -->
        <div class="bg-white rounded-xl overflow-hidden shadow-card hover:shadow-card-hover transition-all duration-300 transform hover:-translate-y-1 cursor-pointer" data-app-id="4">
          <div class="relative h-48 overflow-hidden">
            <img src="https://picsum.photos/id/5/400/300" alt="应用截图" class="w-full h-full object-cover">
            <div class="absolute top-3 right-3 bg-white/90 backdrop-blur-sm rounded-full px-2 py-1 text-xs font-medium text-primary">
              <i class="fa fa-star mr-1"></i>4.6
            </div>
          </div>
          <div class="p-4">
            <div class="flex items-center space-x-3 mb-3">
              <div class="w-12 h-12 rounded-lg overflow-hidden bg-neutral-100 flex-shrink-0">
                <img src="https://picsum.photos/id/13/100/100" alt="应用图标" class="w-full h-full object-cover">
              </div>
              <div>
                <h3 class="font-bold text-neutral-700">健身教练</h3>
                <p class="text-xs text-neutral-500">生活服务</p>
              </div>
            </div>
            <p class="text-sm text-neutral-600 mb-4 line-clamp-2">个性化健身计划，专业指导，记录你的健身历程。</p>
            <div class="flex justify-between items-center">
              <span class="text-xs text-neutral-500">150万+ 下载</span>
              <span class="bg-secondary/10 text-secondary px-3 py-1 rounded-full text-xs font-medium">内购</span>
            </div>
          </div>
        </div>
        
        <!-- 应用卡片 5 -->
        <div class="bg-white rounded-xl overflow-hidden shadow-card hover:shadow-card-hover transition-all duration-300 transform hover:-translate-y-1 cursor-pointer" data-app-id="5">
          <div class="relative h-48 overflow-hidden">
            <img src="https://picsum.photos/id/6/400/300" alt="应用截图" class="w-full h-full object-cover">
            <div class="absolute top-3 right-3 bg-white/90 backdrop-blur-sm rounded-full px-2 py-1 text-xs font-medium text-primary">
              <i class="fa fa-star mr-1"></i>4.8
            </div>
          </div>
          <div class="p-4">
            <div class="flex items-center space-x-3 mb-3">
              <div class="w-12 h-12 rounded-lg overflow-hidden bg-neutral-100 flex-shrink-0">
                <img src="https://picsum.photos/id/14/100/100" alt="应用图标" class="w-full h-full object-cover">
              </div>
              <div>
                <h3 class="font-bold text-neutral-700">旅行助手</h3>
                <p class="text-xs text-neutral-500">生活服务</p>
              </div>
            </div>
            <p class="text-sm text-neutral-600 mb-4 line-clamp-2">一站式旅行规划，景点推荐，机票酒店预订。</p>
            <div class="flex justify-between items-center">
              <span class="text-xs text-neutral-500">80万+ 下载</span>
              <span class="bg-primary/10 text-primary px-3 py-1 rounded-full text-xs font-medium">免费</span>
            </div>
          </div>
        </div>
        
        <!-- 应用卡片 6 -->
        <div class="bg-white rounded-xl overflow-hidden shadow-card hover:shadow-card-hover transition-all duration-300 transform hover:-translate-y-1 cursor-pointer" data-app-id="6">
          <div class="relative h-48 overflow-hidden">
            <img src="https://picsum.photos/id/7/400/300" alt="应用截图" class="w-full h-full object-cover">
            <div class="absolute top-3 right-3 bg-white/90 backdrop-blur-sm rounded-full px-2 py-1 text-xs font-medium text-primary">
              <i class="fa fa-star mr-1"></i>4.5
            </div>
          </div>
          <div class="p-4">
            <div class="flex items-center space-x-3 mb-3">
              <div class="w-12 h-12 rounded-lg overflow-hidden bg-neutral-100 flex-shrink-0">
                <img src="https://picsum.photos/id/15/100/100" alt="应用图标" class="w-full h-full object-cover">
              </div>
              <div>
                <h3 class="font-bold text-neutral-700">学习英语</h3>
                <p class="text-xs text-neutral-500">学习教育</p>
              </div>
            </div>
            <p class="text-sm text-neutral-600 mb-4 line-clamp-2">从基础到高级，全方位提升你的英语水平。</p>
            <div class="flex justify-between items-center">
              <span class="text-xs text-neutral-500">300万+ 下载</span>
              <span class="bg-secondary/10 text-secondary px-3 py-1 rounded-full text-xs font-medium">内购</span>
            </div>
          </div>
        </div>
        
        <!-- 应用卡片 7 -->
        <div class="bg-white rounded-xl overflow-hidden shadow-card hover:shadow-card-hover transition-all duration-300 transform hover:-translate-y-1 cursor-pointer" data-app-id="7">
          <div class="relative h-48 overflow-hidden">
            <img src="https://picsum.photos/id/8/400/300" alt="应用截图" class="w-full h-full object-cover">
            <div class="absolute top-3 right-3 bg-white/90 backdrop-blur-sm rounded-full px-2 py-1 text-xs font-medium text-primary">
              <i class="fa fa-star mr-1"></i>4.9
            </div>
          </div>
          <div class="p-4">
            <div class="flex items-center space-x-3 mb-3">
              <div class="w-12 h-12 rounded-lg overflow-hidden bg-neutral-100 flex-shrink-0">
                <img src="https://picsum.photos/id/16/100/100" alt="应用图标" class="w-full h-full object-cover">
              </div>
              <div>
                <h3 class="font-bold text-neutral-700">社交聊天</h3>
                <p class="text-xs text-neutral-500">社交沟通</p>
              </div>
            </div>
            <p class="text-sm text-neutral-600 mb-4 line-clamp-2">高清视频通话，安全加密，支持多平台同步。</p>
            <div class="flex justify-between items-center">
              <span class="text-xs text-neutral-500">1000万+ 下载</span>
              <span class="bg-primary/10 text-primary px-3 py-1 rounded-full text-xs font-medium">免费</span>
            </div>
          </div>
        </div>
        
        <!-- 应用卡片 8 -->
        <div class="bg-white rounded-xl overflow-hidden shadow-card hover:shadow-card-hover transition-all duration-300 transform hover:-translate-y-1 cursor-pointer" data-app-id="8">
          <div class="relative h-48 overflow-hidden">
            <img src="https://picsum.photos/id/9/400/300" alt="应用截图" class="w-full h-full object-cover">
            <div class="absolute top-3 right-3 bg-white/90 backdrop-blur-sm rounded-full px-2 py-1 text-xs font-medium text-primary">
              <i class="fa fa-star mr-1"></i>4.7
            </div>
          </div>
          <div class="p-4">
            <div class="flex items-center space-x-3 mb-3">
              <div class="w-12 h-12 rounded-lg overflow-hidden bg-neutral-100 flex-shrink-0">
                <img src="https://picsum.photos/id/17/100/100" alt="应用图标" class="w-full h-full object-cover">
              </div>
              <div>
                <h3 class="font-bold text-neutral-700">照片编辑器</h3>
                <p class="text-xs text-neutral-500">摄影美化</p>
              </div>
            </div>
            <p class="text-sm text-neutral-600 mb-4 line-clamp-2">强大的照片编辑功能，滤镜、贴纸、文字一应俱全。</p>
            <div class="flex justify-between items-center">
              <span class="text-xs text-neutral-500">400万+ 下载</span>
              <span class="bg-secondary/10 text-secondary px-3 py-1 rounded-full text-xs font-medium">内购</span>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 加载更多按钮 -->
      <div class="text-center mt-8">
        <button class="px-6 py-3 bg-white border border-neutral-200 rounded-full text-neutral-700 font-medium hover:bg-neutral-50 transition-colors">
          加载更多 <i class="fa fa-angle-down ml-1"></i>
        </button>
      </div>
    </section>
    
    <!-- 应用详情页 (默认隐藏) -->
    <section id="app-detail" class="hidden space-y-8">
      <div class="flex flex-col md:flex-row gap-8">
        <!-- 左侧应用信息 -->
        <div class="md:w-1/3">
          <div class="bg-white rounded-xl p-6 shadow-card">
            <div class="flex items-center space-x-4 mb-6">
              <div class="w-20 h-20 rounded-xl overflow-hidden bg-neutral-100">
                <img src="https://picsum.photos/id/10/200/200" alt="应用图标" class="w-full h-full object-cover">
              </div>
              <div>
                <h2 class="text-xl font-bold text-neutral-700" id="detail-title">全能笔记</h2>
                <div class="flex items-center space-x-1 text-yellow-400 text-sm mt-1">
                  <i class="fa fa-star"></i>
                  <i class="fa fa-star"></i>
                  <i class="fa fa-star"></i>
                  <i class="fa fa-star"></i>
                  <i class="fa fa-star-half-o"></i>
                  <span class="text-neutral-500 ml-1">4.8</span>
                </div>
                <p class="text-sm text-neutral-500 mt-1">效率工具</p>
              </div>
            </div>
            
            <div class="space-y-4">
              <div>
                <h3 class="text-sm font-medium text-neutral-500 mb-1">应用简介</h3>
                <p class="text-neutral-700" id="detail-description">一款功能强大的笔记应用，支持多种格式，云同步和离线使用。拥有简洁直观的界面，丰富的编辑工具，方便你随时随地记录灵感和重要信息。</p>
              </div>
              
              <div>
                <h3 class="text-sm font-medium text-neutral-500 mb-1">基本信息</h3>
                <div class="grid grid-cols-2 gap-2 text-sm">
                  <div class="flex items-center">
                    <i class="fa fa-download text-neutral-400 mr-2"></i>
                    <span>100万+ 下载</span>
                  </div>
                  <div class="flex items-center">
                    <i class="fa fa-calendar text-neutral-400 mr-2"></i>
                    <span>2025-04-15 更新</span>
                  </div>
                  <div class="flex items-center">
                    <i class="fa fa-mobile text-neutral-400 mr-2"></i>
                    <span>Android / iOS</span>
                  </div>
                  <div class="flex items-center">
                    <i class="fa fa-database text-neutral-400 mr-2"></i>
                    <span>48.6 MB</span>
                  </div>
                </div>
              </div>
              
              <div>
                <h3 class="text-sm font-medium text-neutral-500 mb-1">评分分布</h3>
                <div class="space-y-2">
                  <div class="flex items-center">
                    <span class="text-sm w-8">5星</span>
                    <div class="flex-1 h-2 bg-neutral-200 rounded-full mx-2 overflow-hidden">
                      <div class="h-full bg-yellow-400 rounded-full" style="width: 75%"></div>
                    </div>
                    <span class="text-sm w-8 text-right">75%</span>
                  </div>
                  <div class="flex items-center">
                    <span class="text-sm w-8">4星</span>
                    <div class="flex-1 h-2 bg-neutral-200 rounded-full mx-2 overflow-hidden">
                      <div class="h-full bg-yellow-400 rounded-full" style="width: 18%"></div>
                    </div>
                    <span class="text-sm w-8 text-right">18%</span>
                  </div>
                  <div class="flex items-center">
                    <span class="text-sm w-8">3星</span>
                    <div class="flex-1 h-2 bg-neutral-200 rounded-full mx-2 overflow-hidden">
                      <div class="h-full bg-yellow-400 rounded-full" style="width: 5%"></div>
                    </div>
                    <span class="text-sm w-8 text-right">5%</span>
                  </div>
                  <div class="flex items-center">
                    <span class="text-sm w-8">2星</span>
                    <div class="flex-1 h-2 bg-neutral-200 rounded-full mx-2 overflow-hidden">
                      <div class="h-full bg-yellow-400 rounded-full" style="width: 1%"></div>
                    </div>
                    <span class="text-sm w-8 text-right">1%</span>
                  </div>
                  <div class="flex items-center">
                    <span class="text-sm w-8">1星</span>
                    <div class="flex-1 h-2 bg-neutral-200 rounded-full mx-2 overflow-hidden">
                      <div class="h-full bg-yellow-400 rounded-full" style="width: 1%"></div>
                    </div>
                    <span class="text-sm w-8 text-right">1%</span>
                  </div>
                </div>
              </div>
              
              <div class="pt-4 border-t border-neutral-200">
                <button id="download-btn" class="w-full bg-primary hover:bg-primary/90 text-white font-medium py-3 px-4 rounded-xl transition-colors flex items-center justify-center">
                  <i class="fa fa-download mr-2"></i>
                  立即下载
                </button>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 右侧应用截图和评论 -->
        <div class="md:w-2/3 space-y-8">
          <!-- 应用截图 -->
          <div class="bg-white rounded-xl p-6 shadow-card">
            <h3 class="text-lg font-bold text-neutral-700 mb-4">应用截图</h3>
            <div class="grid grid-cols-2 md:grid-cols-3 gap-4">
              <div class="rounded-lg overflow-hidden h-48 bg-neutral-100 cursor-pointer hover:opacity-90 transition-opacity">
                <img src="https://picsum.photos/id/20/400/600" alt="应用截图1" class="w-full h-full object-cover">
              </div>
              <div class="rounded-lg overflow-hidden h-48 bg-neutral-100 cursor-pointer hover:opacity-90 transition-opacity">
                <img src="https://picsum.photos/id/21/400/600" alt="应用截图2" class="w-full h-full object-cover">
              </div>
              <div class="rounded-lg overflow-hidden h-48 bg-neutral-100 cursor-pointer hover:opacity-90 transition-opacity">
                <img src="https://picsum.photos/id/22/400/600" alt="应用截图3" class="w-full h-full object-cover">
              </div>
              <div class="rounded-lg overflow-hidden h-48 bg-neutral-100 cursor-pointer hover:opacity-90 transition-opacity">
                <img src="https://picsum.photos/id/23/400/600" alt="应用截图4" class="w-full h-full object-cover">
              </div>
              <div class="rounded-lg overflow-hidden h-48 bg-neutral-100 cursor-pointer hover:opacity-90 transition-opacity">
                <img src="https://picsum.photos/id/24/400/600" alt="应用截图5" class="w-full h-full object-cover">
              </div>
            </div>
          </div>
          
          <!-- 功能特点 -->
          <div class="bg-white rounded-xl p-6 shadow-card">
            <h3 class="text-lg font-bold text-neutral-700 mb-4">功能特点</h3>
            <ul class="space-y-3">
              <li class="flex items-start">
                <div class="w-6 h-6 rounded-full bg-primary/10 flex items-center justify-center text-primary flex-shrink-0 mt-0.5">
                  <i class="fa fa-check text-xs"></i>
                </div>
                <div class="ml-3">
                  <h4 class="font-medium text-neutral-700">多平台同步</h4>
                  <p class="text-sm text-neutral-600">在手机、平板和电脑上无缝同步你的所有笔记</p>
                </div>
              </li>
              <li class="flex items-start">
                <div class="w-6 h-6 rounded-full bg-primary/10 flex items-center justify-center text-primary flex-shrink-0 mt-0.5">
                  <i class="fa fa-check text-xs"></i>
                </div>
                <div class="ml-3">
                  <h4 class="font-medium text-neutral-700">离线使用</h4>
                  <p class="text-sm text-neutral-600">无需网络也能查看和编辑你的笔记</p>
                </div>
              </li>
              <li class="flex items-start">
                <div class="w-6 h-6 rounded-full bg-primary/10 flex items-center justify-center text-primary flex-shrink-0 mt-0.5">
                  <i class="fa fa-check text-xs"></i>
                </div>
                <div class="ml-3">
                  <h4 class="font-medium text-neutral-700">多种格式支持</h4>
                  <p class="text-sm text-neutral-600">支持文本、图片、表格、附件等多种格式</p>
                </div>
              </li>
              <li class="flex items-start">
                <div class="w-6 h-6 rounded-full bg-primary/10 flex items-center justify-center text-primary flex-shrink-0 mt-0.5">
                  <i class="fa fa-check text-xs"></i>
                </div>
                <div class="ml-3">
                  <h4 class="font-medium text-neutral-700">标签和分类</h4>
                  <p class="text-sm text-neutral-600">轻松管理和查找你的笔记</p>
                </div>
              </li>
              <li class="flex items-start">
                <div class="w-6 h-6 rounded-full bg-primary/10 flex items-center justify-center text-primary flex-shrink-0 mt-0.5">
                  <i class="fa fa-check text-xs"></i>
                </div>
                <div class="ml-3">
                  <h4 class="font-medium text-neutral-700">强大的编辑工具</h4>
                  <p class="text-sm text-neutral-600">丰富的文本格式设置，支持Markdown</p>
                </div>
              </li>
            </ul>
          </div>
          
          <!-- 用户评论 -->
          <div class="bg-white rounded-xl p-6 shadow-card">
            <div class="flex justify-between items-center mb-4">
              <h3 class="text-lg font-bold text-neutral-700">用户评论</h3>
              <button class="text-primary text-sm font-medium hover:underline">查看全部</button>
            </div>
            
            <div class="space-y-6">
              <!-- 评论1 -->
              <div class="border-b border-neutral-200 pb-6">
                <div class="flex items-center mb-2">
                  <div class="w-10 h-10 rounded-full overflow-hidden bg-neutral-100">
                    <img src="https://picsum.photos/id/30/100/100" alt="用户头像" class="w-full h-full object-cover">
                  </div>
                  <div class="ml-3">
                    <h4 class="font-medium text-neutral-700">张三</h4>
                    <div class="flex items-center text-yellow-400 text-xs mt-0.5">
                      <i class="fa fa-star"></i>
                      <i class="fa fa-star"></i>
                      <i class="fa fa-star"></i>
                      <i class="fa fa-star"></i>
                      <i class="fa fa-star"></i>
                      <span class="text-neutral-500 ml-1">5.0</span>
                    </div>
                  </div>
                  <div class="ml-auto text-sm text-neutral-500">2025-05-10</div>
                </div>
                <p class="text-neutral-600">这是我用过的最好的笔记应用，界面简洁，功能强大，云同步非常稳定，完全满足我的日常需求。</p>
              </div>
              
              <!-- 评论2 -->
              <div class="border-b border-neutral-200 pb-6">
                <div class="flex items-center mb-2">
                  <div class="w-10 h-10 rounded-full overflow-hidden bg-neutral-100">
                    <img src="https://picsum.photos/id/31/100/100" alt="用户头像" class="w-full h-full object-cover">
                  </div>
                  <div class="ml-3">
                    <h4 class="font-medium text-neutral-700">李四</h4>
                    <div class="flex items-center text-yellow-400 text-xs mt-0.5">
                      <i class="fa fa-star"></i>
                      <i class="fa fa-star"></i>
                      <i class="fa fa-star"></i>
                      <i class="fa fa-star"></i>
                      <i class="fa fa-star-o"></i>
                      <span class="text-neutral-500 ml-1">4.0</span>
                    </div>
                  </div>
                  <div class="ml-auto text-sm text-neutral-500">2025-05-05</div>
                </div>
                <p class="text-neutral-600">非常好用的笔记应用，功能全面，但是有时候会出现同步延迟的情况，希望后续能够优化。</p>
              </div>
              
              <!-- 评论3 -->
              <div>
                <div class="flex items-center mb-2">
                  <div class="w-10 h-10 rounded-full overflow-hidden bg-neutral-100">
                    <img src="https://picsum.photos/id/32/100/100" alt="用户头像" class="w-full h-full object-cover">
                  </div>
                  <div class="ml-3">
                    <h4 class="font-medium text-neutral-700">王五</h4>
                    <div class="flex items-center text-yellow-400 text-xs mt-0.5">
                      <i class="fa fa-star"></i>
                      <i class="fa fa-star"></i>
                      <i class="fa fa-star"></i>
                      <i class="fa fa-star"></i>
                      <i class="fa fa-star-half-o"></i>
                      <span class="text-neutral-500 ml-1">4.5</span>
                    </div>
                  </div>
                  <div class="ml-auto text-sm text-neutral-500">2025-04-28</div>
                </div>
                <p class="text-neutral-600">一直在寻找一款适合的笔记应用，终于找到了！界面美观，使用流畅，强烈推荐！</p>
              </div>
            </div>
            
            <div class="mt-6 text-center">
              <button class="px-6 py-2 border border-neutral-200 rounded-full text-neutral-700 text-sm font-medium hover:bg-neutral-50 transition-colors">
                加载更多评论
              </button>
            </div>
          </div>
        </div>
      </div>
    </section>
    
    <!-- 下载弹窗 (默认隐藏) -->
    <div id="download-modal" class="fixed inset-0 z-50 flex items-center justify-center hidden">
      <div class="absolute inset-0 bg-black/50 backdrop-blur-sm" id="modal-overlay"></div>
      <div class="relative bg-white rounded-2xl w-full max-w-md mx-4 shadow-xl transform transition-all duration-300 scale-95 opacity-0" id="modal-content">
        <div class="p-6">
          <div class="flex justify-between items-center mb-4">
            <h3 class="text-xl font-bold text-neutral-700">下载应用</h3>
            <button id="close-modal" class="text-neutral-500 hover:text-neutral-700 transition-colors">
              <i class="fa fa-times text-xl"></i>
            </button>
          </div>
          
          <div class="flex items-center space-x-4 mb-6">
            <div class="w-16 h-16 rounded-xl overflow-hidden bg-neutral-100">
              <img src="https://picsum.photos/id/10/200/200" alt="应用图标" class="w-full h-full object-cover">
            </div>
            <div>
              <h4 class="font-bold text-neutral-700" id="modal-title">全能笔记</h4>
              <p class="text-sm text-neutral-500">版本: 3.2.1 | 大小: 48.6 MB</p>
            </div>
          </div>
          
          <div class="space-y-4 mb-6">
            <p class="text-neutral-700">选择下载方式:</p>
            
            <a href="#" class="block p-4 border border-neutral-200 rounded-xl hover:bg-neutral-50 transition-colors flex items-center">
              <i class="fa fa-cloud-download text-primary text-xl mr-3"></i>
              <div>
                <h5 class="font-medium text-neutral-700">网盘下载</h5>
                <p class="text-sm text-neutral-500">高速稳定，支持断点续传</p>
              </div>
            </a>
            
            <a href="#" class="block p-4 border border-neutral-200 rounded-xl hover:bg-neutral-50 transition-colors flex items-center">
              <i class="fa fa-link text-primary text-xl mr-3"></i>
              <div>
                <h5 class="font-medium text-neutral-700">直接下载</h5>
                <p class="text-sm text-neutral-500">快速下载，可能需要手动安装</p>
              </div>
            </a>
          </div>
          
          <div class="pt-4 border-t border-neutral-200">
            <p class="text-xs text-neutral-500 mb-4">点击下载即表示你同意我们的<a href="#" class="text-primary hover:underline">服务条款</a>和<a href="#" class="text-primary hover:underline">隐私政策</a></p>
            <button id="cancel-download" class="w-full bg-neutral-100 hover:bg-neutral-200 text-neutral-700 font-medium py-3 px-4 rounded-xl transition-colors">
              取消
            </button>
          </div>
        </div>
      </div>
    </div>
  </main>

  <!-- 页脚 -->
  <footer class="bg-white border-t border-neutral-200 py-8 mt-12">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
      <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
        <div>
          <div class="flex items-center space-x-2 mb-4">
            <div class="bg-primary text-white p-2 rounded-lg">
              <i class="fa fa-store text-xl"></i>
            </div>
            <span class="text-xl font-bold text-neutral-700">应用商店</span>
          </div>
          <p class="text-sm text-neutral-600 mb-4">发现精彩应用，让生活更便捷、更有趣</p>
          <div class="flex space-x-4">
            <a href="#" class="text-neutral-500 hover:text-primary transition-colors">
              <i class="fa fa-facebook"></i>
            </a>
            <a href="#" class="text-neutral-500 hover:text-primary transition-colors">
              <i class="fa fa-twitter"></i>
            </a>
            <a href="#" class="text-neutral-500 hover:text-primary transition-colors">
              <i class="fa fa-instagram"></i>
            </a>
            <a href="#" class="text-neutral-500 hover:text-primary transition-colors">
              <i class="fa fa-youtube"></i>
            </a>
          </div>
        </div>
        
        <div>
          <h4 class="font-bold text-neutral-700 mb-4">快速链接</h4>
          <ul class="space-y-2">
            <li><a href="#" class="text-sm text-neutral-600 hover:text-primary transition-colors">首页</a></li>
            <li><a href="#" class="text-sm text-neutral-600 hover:text-primary transition-colors">分类浏览</a></li>
            <li><a href="#" class="text-sm text-neutral-600 hover:text-primary transition-colors">排行榜</a></li>
            <li><a href="#" class="text-sm text-neutral-600 hover:text-primary transition-colors">最新上架</a></li>
            <li><a href="#" class="text-sm text-neutral-600 hover:text-primary transition-colors">推荐应用</a></li>
          </ul>
        </div>
        
        <div>
          <h4 class="font-bold text-neutral-700 mb-4">支持</h4>
          <ul class="space-y-2">
            <li><a href="#" class="text-sm text-neutral-600 hover:text-primary transition-colors">帮助中心</a></li>
            <li><a href="#" class="text-sm text-neutral-600 hover:text-primary transition-colors">常见问题</a></li>
            <li><a href="#" class="text-sm text-neutral-600 hover:text-primary transition-colors">联系我们</a></li>
            <li><a href="#" class="text-sm text-neutral-600 hover:text-primary transition-colors">开发者支持</a></li>
            <li><a href="#" class="text-sm text-neutral-600 hover:text-primary transition-colors">隐私政策</a></li>
          </ul>
        </div>
        
        <div>
          <h4 class="font-bold text-neutral-700 mb-4">订阅更新</h4>
          <p class="text-sm text-neutral-600 mb-4">订阅我们的通讯，获取最新应用和独家优惠</p>
          <div class="flex">
            <input type="email" placeholder="你的邮箱地址" class="flex-1 px-4 py-2 border border-neutral-200 rounded-l-lg focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary">
            <button class="bg-primary text-white px-4 py-2 rounded-r-lg hover:bg-primary/90 transition-colors">
              订阅
            </button>
          </div>
        </div>
      </div>
      
      <div class="border-t border-neutral-200 mt-8 pt-8 flex flex-col md:flex-row justify-between items-center">
        <p class="text-sm text-neutral-600">&copy; 2025 应用商店. 保留所有权利.</p>
        <div class="flex space-x-6 mt-4 md:mt-0">
          <a href="#" class="text-sm text-neutral-600 hover:text-primary transition-colors">服务条款</a>
          <a href="#" class="text-sm text-neutral-600 hover:text-primary transition-colors">隐私政策</a>
          <a href="#" class="text-sm text-neutral-600 hover:text-primary transition-colors">Cookie 设置</a>
        </div>
      </div>
    </div>
  </footer>

  <!-- JavaScript -->
  <script>
    // 移动菜单切换
    const mobileMenuButton = document.getElementById('mobile-menu-button');
    const mobileMenu = document.getElementById('mobile-menu');
    
    mobileMenuButton.addEventListener('click', () => {
      if (mobileMenu.classList.contains('h-0')) {
        mobileMenu.classList.remove('h-0');
        mobileMenu.classList.add('h-auto');
      } else {
        mobileMenu.classList.add('h-0');
        mobileMenu.classList.remove('h-auto');
      }
    });
    
    // 应用详情页切换
    const appList = document.getElementById('app-list');
    const appDetail = document.getElementById('app-detail');
    const appCards = document.querySelectorAll('[data-app-id]');
    
    appCards.forEach(card => {
      card.addEventListener('click', () => {
        appList.classList.add('hidden');
        appDetail.classList.remove('hidden');
        
        // 在实际应用中，这里应该根据应用ID加载对应的应用详情
        // 这里仅做示例，使用相同的详情内容
        const appId = card.getAttribute('data-app-id');
        const appTitle = card.querySelector('h3').textContent;
        document.getElementById('detail-title').textContent = appTitle;
        document.getElementById('modal-title').textContent = appTitle;
        
        // 添加返回顶部的平滑滚动
        window.scrollTo({ top: 0, behavior: 'smooth' });
      });
    });
    
    // 返回应用列表
    document.querySelector('header .flex.items-center').addEventListener('click', () => {
      if (appList.classList.contains('hidden')) {
        appList.classList.remove('hidden');
        appDetail.classList.add('hidden');
      }
    });
    
    // 下载弹窗控制
    const downloadBtn = document.getElementById('download-btn');
    const downloadModal = document.getElementById('download-modal');
    const modalContent = document.getElementById('modal-content');
    const modalOverlay = document.getElementById('modal-overlay');
    const closeModal = document.getElementById('close-modal');
    const cancelDownload = document.getElementById('cancel-download');
    
    function openModal() {
      downloadModal.classList.remove('hidden');
      // 延迟添加动画类以确保过渡效果生效
      setTimeout(() => {
        modalContent.classList.remove('scale-95', 'opacity-0');
        modalContent.classList.add('scale-100', 'opacity-100');
      }, 10);
    }
    
    function closeModalFunc() {
      modalContent.classList.remove('scale-100', 'opacity-100');
      modalContent.classList.add('scale-95', 'opacity-0');
      setTimeout(() => {
        downloadModal.classList.add('hidden');
      }, 300);
    }
    
    downloadBtn.addEventListener('click', openModal);
    closeModal.addEventListener('click', closeModalFunc);
    cancelDownload.addEventListener('click', closeModalFunc);
    modalOverlay.addEventListener('click', closeModalFunc);
    
    // 导航栏滚动效果
    const header = document.querySelector('header');
    let lastScrollTop = 0;
    
    window.addEventListener('scroll', () => {
      const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
      
      if (scrollTop > 50) {
        header.classList.add('shadow-md');
      } else {
        header.classList.remove('shadow-md');
      }
      
      lastScrollTop = scrollTop;
    });
  </script>
</body>
</html>
    